<template>
  <div class="Pchongzhiyoulei">
    <div class="tou">
      <Pheader msg="账户余额:" />
      <span>￥20</span>
    </div>
    <div class="main">
      <p class="chongzhi">请选择充值金额:</p>
      <div>
        <el-radio-group v-model="radio">
          <el-radio-button class="qianshu qianshu1" label="500元"></el-radio-button>
          <el-radio-button class="qianshu qianshu2" label="1000元"></el-radio-button>
          <el-radio-button class="qianshu qianshu2" label="2000元"></el-radio-button>
        </el-radio-group>
      </div>
      <p class="chongzhi youlei">充值有礼</p>
      <div class="daleipin">
        <div class="leipin">
            <p class="song">冲500元送:</p>
            <div class="leipin2">
                <div class="img">
                    <img src="../assets/images/banner-8.png" alt="">
                </div>
                <div class="jieshao">
                    <p>新疆哈密瓜25kg</p>
                    <p>价值：500</p>
                </div>
            </div>
        </div>
        <div class="leipin">
            <p class="song">冲500元送:</p>
            <div class="leipin2">
                <div class="img">
                    <img src="../assets/images/banner-8.png" alt="">
                </div>
                <div class="jieshao">
                    <p>新疆哈密瓜25kg</p>
                    <p>价值：500</p>
                </div>
            </div>
        </div>
      </div>
     <Pbutton class="Pbutton" msg="立即充值"/>
    </div>
  </div>
</template>
<script>
import Pbutton from '@/components/P_button.vue'
import Pheader from "@/components/P_header.vue";

export default {
  name: "Pchongzhiyoulei",
  components: {
     Pbutton,
    Pheader
  },
   data () {
      return {
        radio: '500元',
      };
    }
};
</script>
<style scoped>
.Pchongzhiyoulei {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
}
.Pchongzhiyoulei .tou {
  padding: 12px 13px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
}
.Pchongzhiyoulei .tou span {
  margin-left: 10px;
  color: #f08404;
}
.Pchongzhiyoulei .main {
  margin-left: 3%;
}
.Pchongzhiyoulei .main .chongzhi {
  font: 16px/30px "weiruanyahei";
  margin-top: 20px;
}
.Pchongzhiyoulei .main .qianshu {
    margin-left:40px;
    margin-top:20px;
}
.Pchongzhiyoulei .main .Pbutton{
    margin-top:20px;
}
.Pchongzhiyoulei .main .qianshu1{
    margin-left:0px;
}
.Pchongzhiyoulei .main .qianshu2{
    border-left:1px solid #e7e7e7;
    border-radius: 3px;
}
.Pchongzhiyoulei .main .youlei{
    color:#f08404;
}
.Pchongzhiyoulei .main .daleipin{
    /* border:1px solid #e7e7e7; */
    display:flex;
}
.Pchongzhiyoulei .main .daleipin .img{
    width:60%;
}
.Pchongzhiyoulei .main .daleipin .song{
    margin-left:2%;
}
.Pchongzhiyoulei .main .daleipin .jieshao{
    margin-top:30px;
    margin-left:-5%;
}
.Pchongzhiyoulei .main .daleipin .img img{
    width:70%;
}
.Pchongzhiyoulei .main .daleipin .leipin{
    border:1px solid #e7e7e7;
    width: 35%;
    height:150px;
    margin-right: 5%
}
.Pchongzhiyoulei .main .daleipin .leipin2{
    display:flex;
}
</style>